<!DOCTYPE html>
<style>
body { overflow: scroll; }
tr { break-inside:avoid; }
</style>
<div id="multicol" style="columns:4; column-fill:auto; column-gap:0; height:90px; line-height:20px; orphans:1; widows:1;">
    <table style="width:50px;" cellspacing="0" cellpadding="0">
        <thead style="break-inside:avoid;">
            <!-- This is a table header that repeats in all columns the table occurs. -->
            <tr data-offset-y="0" data-expected-height="20">
                <td><br></td>
            </tr>
        </thead>
        <tbody>
            <tr data-offset-y="20" data-expected-height="60">
                <td><br><br><br></td>
            </tr>
            <tr data-offset-y="110" data-expected-height="60">
                <td><br><br><br></td>
            </tr>
            <tr data-offset-y="200" data-expected-height="60">
                <td><br><br><br></td>
            </tr>
        </tbody>
        <tfoot>
            <tr data-offset-y="290" data-expected-height="60">
                <td><br><br><br></td>
            </tr>
        </tfoot>
    </table>
</div>
<script src="../resources/check-layout.js"></script>
<script>
    checkLayout("#multicol");
</script>
